<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>歌词页面</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			ul li span{display:block;}
			ul p{line-height:16px;text-align:center;font-size:20px;}
			nav a{padding-top:15px;}
			nav a video{height:30px;width:100%;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">歌词页面</h1>
		</header>
		
		<div class="mui-content">
		    <ul class="mui-table-view" id="ul">
		       
		        
		    </ul>
		</div>
		
		
		<script src="js/template-web.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/mui.min.js"></script>
		
		<!--创建一个模板-->
		<script type="text/html" id="tpl-p">
			<li class="mui-table-view-cell mui-media">
		        <a href="javascript:;">
		            <img class="mui-media-object mui-pull-left" src="<%= datas.albumpic_small%>">
		            <div class="mui-media-body">
		                <%= datas.singername %>
		                <span class="mui-ellipsis"><%= datas.songname %></span>
		            </div>
		        </a>
		    </li>
		    <% for(var i=0;i<txt.length;i++){%>
		    	  <p><%= txt[i]%></p>
		    <%}%>
		    
		    <nav class="mui-bar mui-bar-tab">
		    	<a class="mui-tab-item mui-active">
		        	<video controls loop autoplay name="media">
		               <source src="<%= datas.url%>" type="audio/mp4">
		        	</video>
		        </a>
		    </nav>
		    
				
		</script>
		
		
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function(){
				var self = plus.webview.currentWebview();  //拿到music页面传过来的数据
                var datas = self.datas;
                mui.get("http://route.showapi.com/213-2",{
					showapi_appid:36618,
	                showapi_sign:'13f2c758227543cd8be498acbdcbc9b1',
	                musicid:datas.songid,  //请求的musicid为传过来的songid
				},function(res){
					if(res && res.showapi_res_code==0){
						var txt=res.showapi_res_body.lyric_txt;
						var txt=txt.replace(/\s+/g, ' ');  //将多个空格变成一个空格
						var txt=txt.split(" "); //根据空格将字符串切割为数组
						var ops = template("tpl-p", {txt:txt,datas:datas});
						$("#ul").html(ops);
					}else{
						mui.alert(res.showapi_res_error);
					}
				})
			})
		</script>
	</body>

</html>